<script setup lang="ts">
import { collectColorAtlasProduct, cancelCollectColorAtlasProduct } from '@/api/search'
import * as _ from 'lodash'
import Relatives from './relatives.vue'
import Material from './material.vue'
import Examples from './examples.vue'
import Section from '@/components/Section/index.vue'
import Title from './title.vue'
import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { ref, reactive, defineProps, nextTick } from 'vue'
import { getGoodsDetailByIdAndUsageCategoryIdV2 } from '@/api/detail'
import { shareUtils } from '@/utils/share'

let item = reactive(undefined)
import Info from './info.vue'

const props = defineProps({
  id: String,
  usageCategoryId: String,
  xCategoryId: String,
  yCategoryId: String
})
let loading = ref(true)

onLoad(() => {

  getGoodsDetailByIdAndUsageCategoryIdV2(
    props.id
  ).then((r) => {
    item = reactive(r)
    if (!item.content) {
      loadingContent.value = false
    }
    loading.value = false
  })


  const page = getCurrentPages().pop()

  const { $page } = page
  let path: string = shareUtils.buildPathQuery($page.fullPath)
  onShareTimeline(() => {
    return {
      title: item.title,
      imageUrl: item.image,
      path
    }
  })
  onShareAppMessage(() => {
    debugger
    return {
      title: item.title,
      imageUrl: item.image,
      path
    }
  })

})

const handleDoCollectFromChild = _.debounce((item) => {
  // todo 代优化
  if (item.is_collected) {
    cancelCollectColorAtlasProduct(item.id).then((r) => {
      item.is_collected = false
    })
  } else {
    collectColorAtlasProduct(item.id).then((r) => {
      item.is_collected = true
    })
  }
}, 500)
const loadingContent = ref(true)
const loadingSizeContent = ref(true)

const handleReady = () => {
  loadingContent.value = false
}
let loadingSizeLen = 0;
const handleLoadSizeContent = () => {
  loadingSizeLen++;
  if (loadingSizeLen == item.size.items.length) {
    loadingSizeContent.value = false
  }
}
</script>

<template>
  <ForOneHeader :enableBack="true" />
  <u-loading-page :loading="loading"></u-loading-page>
  <view v-if="item">
    <up-image :src="item.image" width="750rpx" height="750rpx" :showMenuByLongpress="false"></up-image>
    <MidLayout>
      <Title :item="item" @do-collect="handleDoCollectFromChild(item.good)" />
    </MidLayout>
    <div class="gap"></div>

    <MidLayout>
      <Info :info-array="item.features" />
    </MidLayout>
    <view v-if="item.support.content.length > 0">
      <div class="gap"></div>
      <MidLayout>
        <Material :support="item.support" />
      </MidLayout>
    </view>

    <view v-if="item.content">
      <view class="gap"></view>
      <MidLayout>
        <view class="sku">
          <u-skeleton rows="6" :loading="loadingContent" :rowsHeight="[
            '42',
            '42',
            '42',
            '42',
            '42',
            '42',
            '42',
            '42',
            '300'
          ]" :rowsWidth="[
  '125%',
  '125%',
  '200%',
  '125%',
  '200%',
  '200%',
  '200%',
  '200%',
  '200%'
]" :title="false" :animate="true">
            <view class="content">
              <u-parse :content="item.content" @ready="handleReady"></u-parse>
            </view>
          </u-skeleton>
        </view>
      </MidLayout>
    </view>

    <view v-if="item.examples?.items.length > 0">
      <view class="gap"></view>
      <MidLayout>
        <Examples :en="item.examples.en" :zh="item.examples.zh" :items="item.examples.items" />
      </MidLayout>
    </view>

    <view v-if="item.relatives?.items.length > 0">
      <view class="gap"></view>
      <MidLayout>
        <Relatives icon-name="more" en="RELATIVES" :zh="item.relatives.title" :relatives="item.relatives.items" />
      </MidLayout>
    </view>

    <view v-if="item.size.items.length > 0" class="size-block">
      <div class="gap"></div>
      <MidLayout>
        <Section :zh="item.size.zh" :en="item.size.en">
          <u-skeleton :rows="item.size.items.length" :loading="loadingSizeContent" :title="false"
            :rowsHeight="Array(item.size.items.length).fill(300)" :animate="true">
            <view class="g" :key="item" v-for="item in item.size.items">
              <up-image mode="widthFix" width="100%" height="100%" class="i" :src="item" radius="15rpx"
                @load="handleLoadSizeContent" :showMenuByLongpress="false"></up-image>
            </view>
          </u-skeleton>
        </Section>
      </MidLayout>
    </view>

  </view>
</template>

<style scoped lang="scss">
.sku {
  padding: 25rpx 0;
}

.size-block {
  padding-bottom: 25rpx;
}
</style>
